<template>
    <div class="page-child-main see-doctor2">
        <a-spin :class="loading&&'null-spin'" tip="Loading..." :spinning="loading">
            <div></div>
        </a-spin>
        <div class="page-title">按机构类型统计</div>
        <div id="seeDoctorChart2"></div>
    </div>
</template>
<script lang="ts">
import api from "@/api/api";
import { echartLoad, toDecimalNoZero } from "@/utils";
import { Component, Vue } from "vue-property-decorator";
@Component({
    name: "tpl",
    components: { },
})
export default class extends Vue {
    loading = false;
    chart: any = null;
    dataCount = 0;
    dataList: any[] = [ ];
    async mounted() {
        await this.getData()
        let total = 0;
        this.dataList.forEach((item) => {
            const val = Number(item.val);
            total += val;
        });
        this.dataCount = total;
        echartLoad(() => {
            this.setChart();
        });
    }
    async getData() {
        this.loading = true;
        try {
            const res = await api.getVisitStatisticsByInstitutionType();
            const patientFlowRanking=res.data.patientFlowRanking || []
            this.dataList=patientFlowRanking.map(item=>{
                return {name:item.institutionalType,val:item.patientCount}
            })
            
        } finally {
            this.loading = false;
        }
    }

    setChart() {
        if (this.chart) {
            this.resetChart();
        } else {
            this.initChart();
        }
    }

    resetChart() {
        const options = this.chart.getOption();
        options.series = this.getSeries();
        this.chart.setOption(options, true);
    }
    initChart() {
        const chartDom = document.getElementById("seeDoctorChart2");
        // eslint-disable-next-line @typescript-eslint/no-this-alias
        const options: any = {
            legend: {
                bottom: 0,
            },
            tooltip: {
                trigger: "item",
                formatter: "{a} : {c}人",
            },
            series: this.getSeries(),
        };
        if (chartDom) {
            this.chart = window.echarts.init(chartDom as HTMLDivElement);
            this.chart.setOption(options);
        }
    }

    getSeries() {
        return [
            {
                name: "就诊人数",
                type: "pie",
                radius: ["30%", "60%"],
                center: ['50%', '45%'],
                avoidLabelOverlap: false,
                padAngle: 1,
                itemStyle: {
                    borderRadius: 0,
                },
                // label: {
                //     show: false,
                //     position: "center",
                // },

                // labelLine: {
                //     show: false,
                // },
                data: this.dataList.map((item) => ({ value: item.val, name: item.name })),
            },
        ];
    }
}
</script>
<style lang="scss">
.see-doctor2 {
    height: 49%;
    display: flex;
    flex-direction: column;
    #seeDoctorChart2 {
        margin-top: 5px;
        flex-grow: 1;
        height: 50%;
        width: 100%;
    }
}
</style>
